<style lang="scss" scoped>
    .box{
        border:1px solid #E3E3E5;
        border-radius: 10px;
        box-sizing: border-box;
        padding: 10px;
        &:hover{
            box-shadow: 0 1px 6px rgba(0,0,0,.2);
        }
    }
    .monitor_chart{
        position: relative;
        p{
            position: absolute;
            z-index: 99;
            left: 16px;
            top: 80px;
            font-size: 20px;
            color: #333;
        }
    }
    .exception .item{
        height: 32px;
        border:1px solid #E3E3E5;
        line-height: 32px;
        font-size: 16px;
        color: #333;
        margin-bottom: 10px;
        padding-left: 40px;
        border-radius: 10px;
        position: relative;
        span{
            text-align: right;
            color: #999;
            float: right;
            padding-right: 10px;
        }
        &::after{
            content: "";
            border-radius: 50%;
            width: 16px;
            height: 16px;
            position:absolute;
            left: 10px;
            top:7px;
        }
    }

    .exception .item:nth-child(1):after{ background: var(--success-color); }
    .exception .item:nth-child(2):after{ background: var(--warning-color); }
    .exception .item:nth-child(3):after{ background: var(--error-color); }
    .project .item{
        text-align: center;
        width: 28%;
        font-size: 12px;
        padding:10px 0 6px;
        cursor: pointer;
        margin-bottom: 10px;
        color: #fff;
        img{
            width: 26px;
        }
        p{
            margin-top: 6px;
        }
    }
    .project .item:nth-child(n+4){
        margin-bottom: 0;
    }
    .project .item:nth-child(1){ background: var(--primary-color);  }
    .project .item:nth-child(2){ background: var(--error-color);  }
    .project .item:nth-child(3){ background: var(--warning-color);  }
    .project .item:nth-child(4){ background: var(--zi-color);  }
    .project .item:nth-child(5){ background: var(--success-color);  }
    .project .item:nth-child(6){ border:2px solid #E3E3E5; color: #C0C0C0;}
    .tabs{
        width: 80%;
        p{
            font-size: 16px;
            color: #999;
            cursor: pointer;
            user-select: none;
        }
        p.active{
            color: var(--zi-color);
            position: relative;
            &::after{
                content: '';
                border-radius: 2px;
                height: 2px;
                width: 80%;
                position: absolute;
                left: 0;right: 0;
                margin:auto;
                bottom: -6px;
                background:var(--zi-color);
            }
        }
    }
    .data_analysis_chart{
        height: calc(100vh - 220px - 64px - 160px);
    }
    .income_detail{
        height: calc(100vh - 220px - 64px - 130px);
        display: flex;
        flex-direction: column;
        justify-content: space-around;
    }
    .font-size-20{
        font-size: 20px;
    }
    .line-height-32{
        line-height: 32px;
    }
    .other_plate{
        height: calc(100vh - 220px - 64px - 54px);
        display: flex;
        flex-direction: column;
        .service{
            height: 60%;
            .item{
                background-size: contain;
                width:300px;
                padding:10px 16px;
                display: flex;
                flex-direction: column;
                justify-content: space-around;
                h6{
                    font-size: 14px;
                    &::before{
                    content: "";
                        border-radius: 50%;
                        width: 16px;
                        height: 16px;
                        margin: 2px 10px 0 0;
                        float: left;
                    }
                }
                h4{
                    font-size: 14px;
                }
                p{
                    font-size: 12px;
                }
                .line{
                    width: 100%;
                    background:#D3EDF9 ;
                    height: 6px;
                    border-radius: 6px;
                    overflow: hidden;
                    position: relative;
                    span{
                        position:absolute;
                        height: 6px;
                        width: 60%;
                        left: 0;
                        top: 0;
                        background: #61BEE6;
                    }
                }
                button{
                    width:80px;
                    border-radius: 10px;
                }
            }
            .item:nth-child(1){
                background-size: contain;
                background: url(../assets/service-bg1.png) no-repeat;
                h6{
                    color: #333;
                    &::before{
                        background: #62BFE6;
                    }
                }
                button{
                    border-color: #61BEE6;
                    color: #61BEE6;
                }
            }
            .item:nth-child(2){
                background-size: contain;
                background: url(../assets/service-bg2.png) no-repeat;
                h6{
                    &::before{
                        background: #fff;
                    }
                }
                button{
                    background: #fff;
                    color: #61BEE6;
                }
            }
        }
    }
    .end_plate {

        .content{
            display: flex;
            justify-content: space-around;
            flex-direction: column;;
            height: 100%;
            .line{
                overflow: hidden;
                background: #F2EFF9;
                height: 4px;
                width: 100%;
                border-radius: 4px;
                position: relative;
                p{
                    position: absolute;
                    left: 0;top: 0;
                    width: 60%;
                    height: 4px;
                    background: var(--zi-color);
                }
            }
        }
        
    }
</style>
<style lang="scss">
.service .ivu-card-body{
    height: calc(100% - 38px)
}
.end_plate .ivu-card-body{
    padding: 0 16px;
    height: calc(100% - 40px)
}
</style>
<template>
    <div class="home">
        <Row type="flex" style="height:220px" justify="space-between" :gutter="20" class="mb-2">
            <Col span="10">
                <div class="monitor_chart h-100b">
                    <div ref="monitor_chart" class="box h-100b bg-fff radius-3"></div>
                    <p>$123,688.00</p>
                </div>
            </Col>
            <Col span="6">
                <Card class="h-100b">
                    <p slot="title">异常管理</p>
                    <div  slot="extra" class="more" >...</div>
                    <div class="exception">
                        <p class="item">
                            低估值买入
                            <span>投资潜力大</span>
                        </p>
                        <p class="item">
                            低估值买入
                            <span>投资潜力大</span>
                        </p>
                        <p class="item">
                            低估值买入
                            <span>投资潜力大</span>
                        </p>
                    </div>
                    <Button class="mx-auto radius-10 d-block" size="small">查看详情</Button>
                </Card>
            </Col>
            <Col span="8">
                <Card class="h-100b">
                    <p slot="title">项目管理</p>
                    <div  slot="extra" class="more" >...</div>
                    <div class="project d-flex between wrap">
                        <div class="item radius-10" v-for="(val,index) in project" :key="index">
                            <img :src="require(`@/assets/project_manag/${index+1}.png`)" class="d-block mx-auto">
                            <p>理财项目</p>
                        </div>
                    </div>
                </Card>
            </Col>
        </Row>
        <Row type="flex"  justify="space-between" :gutter="20" >
            <Col span="16">
                <Card >
                    <p slot="title">数据分析</p>
                    <div  slot="extra" class="more" >...</div>
                    <Row >
                        <Col span="18" >
                            <div class="tabs d-flex around text-center mx-auto mb-1">
                                <p v-for="(val,index) in data_analysis_text" :key="index" 
                                :class="{active:index===data_analysis_index}" @click="set_data_analysis(index)">{{val}}</p>
                            </div>
                            <div class="data_analysis_chart" ref="data_analysis_chart"></div>
                        </Col>
                        <Col span="6" >
                            <div class="income_detail">
                                <div class="d-flex between">
                                    <p class="color-999">收益明细</p>
                                    <Button size="small">查看更多</Button>
                                </div>
                                <div class="d-flex between color-666">
                                    <div>
                                        <p>理财项目</p>
                                        <p class="primary-color font-size-20">{{income_detail_data[data_analysis_index][0]}}</p>
                                    </div>
                                    <div>
                                        <p>占比</p>
                                        <p class="color-999 line-height-32" >50%</p>
                                    </div>
                                </div>
                                <div class="d-flex between color-666">
                                    <div>
                                        <p>理财项目</p>
                                        <p class="error-color font-size-20">{{income_detail_data[data_analysis_index][1]}}</p>
                                    </div>
                                    <div>
                                        <p>占比</p>
                                        <p class="color-999 line-height-32" >50%</p>
                                    </div>
                                </div>
                                <div class="d-flex between color-666">
                                    <div>
                                        <p>理财项目</p>
                                        <p class="warning-color font-size-20">{{income_detail_data[data_analysis_index][2]}}</p>
                                    </div>
                                    <div>
                                        <p>占比</p>
                                        <p class="color-999 line-height-32" >50%</p>
                                    </div>
                                </div>
                                <div class="d-flex between color-666">
                                    <div>
                                        <p>理财项目</p>
                                        <p class="zi-color font-size-20">{{income_detail_data[data_analysis_index][3]}}</p>
                                    </div>
                                    <div>
                                        <p>占比</p>
                                        <p class="color-999 line-height-32" >50%</p>
                                    </div>
                                </div>
                            </div>
                        </Col>
                    </Row>
                </Card>
            </Col>
            <Col span="8">
                <div class="other_plate">
                    <Card class="mb-2 service">
                        <p slot="title">综合服务</p>
                        <div  slot="extra" class="more" >...</div>
                            <div class="swiper-container h-100b">
                                <div class="swiper-wrapper ">
                                    <div class="swiper-slide item ">
                                        <h6>理财体验</h6>
                                        <h4>分析理财行为，评估理财健康分</h4>
                                        <p><span class="zi-color">60%</span>的用户超过了60分</p>
                                        <p class="line"><span></span></p>
                                        <Button size="small">查看分数</Button>
                                    </div>
                                    <div class="swiper-slide item color-fff">
                                        <h6>目标投</h6>
                                        <h4>赚多少你来定</h4>
                                        <p>有28000+</p>
                                        <p style="background:var(--zi-color)" class="radius-10 pl-1">陈xx已达成收益率10%</p>
                                        <Button size="small">体验一下</Button>
                                    </div>
                                </div>
                                <div class="swiper-pagination"></div>
                            </div>
                       
                    </Card>
                    <div style="height:40%">
                        <Row :gutter="20" class="h-100b">
                            <Col span="12" class="h-100b" >
                                <Card class="h-100b end_plate">
                                    <p slot="title">财务管理</p>
                                    <div  slot="extra">
                                        <Button size="small">查看更多</Button>
                                    </div>
                                    <div class="font-12 content">
                                        <p class="color-999">2019年理财成绩</p>
                                        <h3 class="zi-color m-0 font-16">+900.00</h3>
                                        <div class="line"><p></p></div>
                                        <p class="color-999">
                                            打败了<span class="zi-color">26%</span>全国财友
                                        </p>
                                    </div>
                                </Card>
                            </Col>
                            <Col span="12"  class="h-100b">
                                <Card class="h-100b end_plate ">
                                    <p slot="title">资质认证</p>
                                    <div  slot="extra">
                                        <Button size="small">查看更多</Button>
                                    </div>
                                    <div class="content pt-1 ">
                                        <img src="@/assets/prove.png" class="mx-auto d-block" style="width:40px">
                                        <p class="text-center color-333 font-14">您的资质认证已通过</p>
                                    </div>
                                </Card>
                            </Col>
                        </Row>
                    </div>
                </div>
            </Col>
        </Row>
    </div>
</template>

<script>
import echarts from 'echarts'
import monitor from "@/assets/charts/monitor"
import data_analysis from "@/assets/charts/data_analysis"
import 'swiper/css/swiper.min.css'
import Swiper from 'swiper';
export default {
    name: 'home',
    data(){
        return{
            data_analysis_data:[
                [300, 52, 200, 334, 390, 330, 220],
                [55, 123, 22, 128, 88, 32, 89],
                [12, 2, 345, 43, 43, 330, 33],
                [90, 52, 84, 222, 54, 330, 100],
                [10, 52, 54, 124, 222, 55, 44],
            ],
            data_analysis_chart:null,
            project:[
                '理财项目','基金项目','黄金项目','股票项目','其他项目','添加项目'
            ],
            data_analysis_text:['日收益','月收益','年收益','累计收益'],
            data_analysis_index:1,
            income_detail_data:[
                [800.00,300.00,600.00,900.00,100.00],
                [900.00,200.00,500.00,800.00,200.00],
                [400.00,100.00,400.00,700.00,300.00],
                [500.00,50.00,300.00,600.00,400.00],
                [600.00,300.00,200.00,500.00,500.00]
            ]
        }
    },
    methods:{
        set_data_analysis(index){
            this.data_analysis_index=index
            data_analysis.series[0].data=this.data_analysis_data[index]
            this.data_analysis_chart.setOption(data_analysis);
        }
    },
    mounted(){
        this.$nextTick(()=>{
            const monitor_chart=echarts.init(this.$refs.monitor_chart)
            this.data_analysis_chart=echarts.init(this.$refs.data_analysis_chart)
            data_analysis.series[0].data=this.data_analysis_data[this.data_analysis_index],
            monitor_chart.setOption(monitor);
            this.data_analysis_chart.setOption(data_analysis);
            new Swiper ('.swiper-container', {
                slidesPerView: 'auto',
                spaceBetween: 20,
                pagination: {
                    el: '.swiper-pagination',
                    clickable: true,
                },
            })        
            
        })

    }
}
</script>
